<template>
  <view class="wrapper">
    <view class="top-img">
      <image src="/static/image/login-background.jpeg" />
    </view>
    <scroll-view scroll-x class="bg-white nav text-center top-tabs">
      <view class="flex">
        <view v-for="item in tabs" :key="item.id" class="cu-item" :class="item.id == activeTabId ? 'cur' : ''"
          :data-id="item.id" @tap="tabSelect(item.id)">
          {{ item.title }}
        </view>
      </view>
    </scroll-view>
    <view class="tab-contens">
      <view class="tab-content about" v-show="activeTabId === 0">
        <view class="card" v-if="detailData.eduBackground">
          <view class="title">教育背景</view>
          <view class="content">{{ detailData.eduBackground }}</view>
        </view>
        <view class="card" v-if="detailData.societyRoles?.length">
          <view class="title">社会活动与任职</view>
          <view class="content">
            <view v-for="item of detailData.societyRoles">
              {{ item }}
            </view>
          </view>
        </view>
        <view class="card" v-if="detailData.honors?.length">
          <view class="title">荣誉与评价</view>
          <view class="content">
            <view v-for="item of detailData.honors">
              {{ item }}
            </view>
          </view>
        </view>
        <view class="card" v-if="detailData.professionalResearchs?.length">
          <view class="title">专业研究</view>
          <view class="content">
            <view v-for="item of detailData.professionalResearchs">
              {{ item }}
            </view>
          </view>
        </view>
      </view>
      <view class="tab-content articles" v-show="activeTabId === 1">
        <view class="card" v-for="item of articleList" @click="openArticle(item.url)">
          <view class="cover-img"><img :src="item.img"></view>
          <view class="title"><text>{{ item.title }}</text></view>
          <view class="time"><text>{{ item.time }}</text></view>
        </view>
      </view>
      <view class="tab-content about" v-show="activeTabId === 2">
        <view class="card" v-if="detailData.bankruptcyReorganization?.length">
          <view class="title">破产重整及清算项目</view>
          <view class="content">
            <view v-for="item of detailData.bankruptcyReorganization">
              {{ item }}
            </view>
          </view>
        </view>
        <view class="card" v-if="detailData.bankruptcyDerivative?.length">
          <view class="title">破产衍生专项法律服务</view>
          <view class="content">
            <view v-for="item of detailData.bankruptcyDerivative">
              {{ item }}
            </view>
          </view>
        </view>
        <view class="card" v-if="detailData.legalCounsel?.length">
          <view class="title">法律顾问</view>
          <view class="content">
            <view v-for="item of detailData.legalCounsel">
              {{ item }}
            </view>
          </view>
        </view>
        <view class="card" v-if="detailData.otherAchievements?.length">
          <view class="title">其他业绩</view>
          <view class="content">
            <view v-for="item of detailData.otherAchievements">
              {{ item }}
            </view>
          </view>
        </view>
        <view class="card" v-if="detailData.litigationLegalServices?.length">
          <view class="title">部分典型诉讼法律服务</view>
          <view class="content">
            <view v-for="item of detailData.litigationLegalServices">
              {{ item }}
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { getLawyerDetail } from '@/mockData/lawyerControl'
import { getArticleList } from '@/mockData/articleControl'

const activeTabId = ref(0)
const detailData = ref<any>({})
const articleList = ref<any>([])

const tabs = ref([
  { id: 0, title: '关于律师' },
  { id: 1, title: '实务研究' },
  { id: 2, title: '典型业绩' }
])

const tabSelect = (id) => {
  activeTabId.value = id;
}


onLoad(async (option) => {
  const id = option?.id || '';
  getLawyerDetailById(id)
  getArticleListByAuthorId(id)
})

const getLawyerDetailById = async (id: string) => {
  detailData.value = getLawyerDetail(id);
  console.log(detailData.value.litigationLegalServices);

}
const getArticleListByAuthorId = async (id: string) => {
  articleList.value = getArticleList({ authorId: id });
  console.log(!articleList.value?.length);

  if (!articleList.value?.length) {
    tabs.value = tabs.value.filter(item => item.id !== 1)
  }
}

const openArticle = (url) => {
  uni.navigateTo({
    url: `/pages/interlinkage/interlinkage?url= ${encodeURIComponent(url)}`
  })
}

</script>

<style scoped lang="scss">
.wrapper {
  padding-bottom: 26rpx;

  .top-img {
    width: 100%;
    height: 400rpx;

    image {
      width: 100%;
      height: 100%;
      object-fit: fill;
    }
  }

  .top-tabs {
    position: sticky;
    top: 0;
    z-index: 1;

    .cu-item {
      flex: auto;
      font-size: 14px;
    }

    .cur {
      border-color: #2a4791;
    }
  }

  .about {
    .card {
      margin: 26rpx;
      border-radius: 10rpx;
      background-color: #fff;

      .title {
        padding: 20rpx;
        border-bottom: 1rpx solid #ddd;
        font-weight: bold;
        font-size: 16px;
      }

      .content {
        padding: 20rpx;
        font-size: 14px;
      }
    }
  }

  .articles {
    .card {
      overflow: hidden;
      margin: 26rpx;
      border-radius: 10rpx;
      background-color: #fff;

      .cover-img {

        image {
          width: 100%;
        }
      }

      .title {
        margin: 20rpx;
      }

      .time {
        margin-left: 20rpx;
        margin-bottom: 20rpx;
        font-size: 12px;
        color: #999;
      }
    }
  }
}
</style>
@/mockData/lawyerControl
